<style>
.demo-split {
  height: 400px;
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding-left: 10px;
}
</style>
<template>
  <div>
    <Card ref="card">
      <p slot="title">评定报告</p>
      <a href="#" slot="extra" @click.prevent="refData">刷新</a>
      <Row :gutter="16">
        <Col span="6">
          <Input v-model="str" size="large" placeholder="请输入项目名称" />
        </Col>

        <Col span="4">
          <Button @click="pPage=s;Search();" size="large" type="primary" icon="ios-search">查询</Button>
        </Col>
      </Row>
    </Card>
    <div class="demo-split" ref="divSplit">
      <Split v-model="split1">
        <div slot="left" class="demo-split-pane">
          <Tree :data="dataTree" @on-select-change="treeChange" :render="renderContent"></Tree>
        </div>
        <div slot="right" class="demo-split-pane">
          <Table border :columns="tableTitle" :data="tableData" ref="table" :height="tableHeight"></Table>
          <Page
            class="margin-top-10"
            :total="total"
            :current="pPage"
            :page-size="pSize"
            :page-size-opts="[50,100,300,500,1000,2000,5000]"
            @on-change="s=>{pPage=s;Search();}"
            @on-page-size-change="p=>{pSize=p;pPage=1;Search()}"
            show-total
            show-sizer
          />
        </div>
      </Split>
    </div>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { Message, Modal } from "view-design";
import {
  SearchXFYGrouphasPage, 
  GetAreaYear,
} from "@/api/xfy";
export default {
  name: "xfy_search_group_saved",
  data() {
    return {
      split1: 0.18,
      str: "",
      total: 0,
      pPage: 1,
      pSize: 50,
      tableHeight: 450,
      modal2: false,
      areaList: [],
      areaTmp: "",
      tmpGid: "",
      tableTitle: [
        {
          title: "序号",
          key: "R_INDEX",
          align: "center",
          width: 80,
        },
        {
          title: "项目名称",
          key: "GroupName",
          minWidth: 400,
          render: (h, params) => {
            return h(
              "a",
              {
                props: {
                  href: "#",
                },
                style: {
                  fontSize: "18px",
                },
                on: {
                  click: () => {
                    this.turntodetail(params.row);
                  },
                },
              },
              params.row.GroupName
            );
          },
        },
        {
          title: "实施日期",
          key: "sys_CreateDate",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              dayjs(params.row.sys_CreateDate).format("YYYY年MM月DD日")
            );
          },
        },
      ],
      tableData: [],
      titlename: "",
      routername: "",
      dataTree: [],
      area: "",
      year: "",
    };
  },

  methods: {
    GetAreaYear() {
      let vm = this;
      GetAreaYear().then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          var tree = []; 
           if (data.Data && data.Data.length > 0) {
            data.Data.forEach((e) => {
              var child = [];
              e.Area.forEach((a) => {
                child.push({
                  title: a.AreaName,
                  year: a.YearName,
                  type: 2,
                });
              });
              tree.push({
                title: e.Year,
                children: child,
                type: 1,
              });
            });
          }
          vm.dataTree = [
            {
              title: "所有项目",
              type: 0,
              expand: true,
              children: tree,
            },
          ];
        } else {
          vm.$Message.error(data.Message);
        }
      });
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
          },
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "md-folder",
              },
              style: {
                marginRight: "8px",
                fontSize: "22px",
              },
            }),
            h(
              "span",
              {
                style: {
                  marginRight: "8px",
                  fontSize: "16px",
                },
              },
              data.title
            ),
          ]),
        ]
      );
    },
    treeChange(a, b, c) {
      if (b.type == 0) {
        this.area = "";
        this.year = "";
      } else if (b.type == 1) {
        this.area = "";
        this.year = b.title;
      } else if (b.type == 2) {
        this.area = b.title;
        this.year = b.year;
      }
      this.pPage = 1;
      this.Search();
    },
    Search() {
      let vm = this;
      var reqData = {
        str: vm.str,
        issaved: 1,
        area: vm.area,
        year: vm.year,
        page: vm.pPage,
        size: vm.pSize,
      };
      SearchXFYGrouphasPage(reqData).then((res) => {
        const data = res.data;
        if (data.Type == 1) {
          vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          vm.$Message.error(data.Message);
        }
      });
    },
    refData() {
      this.GetAreaYear();
      this.Search();
    },

    turntodetail(item) {
      this.$router.push({
        name: "search_xfy",
        params: { id: item.Gid, issaved: 1 },
        query: { groupname: item.GroupName },
      });
    },
  },
  created() {},
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.$refs.divSplit.style.height =
      window.innerHeight - cardHeight - 160 + "px";
    this.tableHeight = window.innerHeight - cardHeight - 220;
    this.refData();
  },
};
</script>
